<template>
  <div class="app-container">
    <div class="filter-container">
      <searchForm
        :form-options="formOptions"
        btn-items="search,reset"
        @onSearch="handleFilter"
        @onReset="handleReset"
      />
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      fit
      size="mini"
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        prop="account"
        label="用户编码"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="sex"
        label="性别"
        width="180"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.sex | sexFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="full_name"
        label="所属部门"
        width="180"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
        width="260"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="config(row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNo"
      :pageSizes="pageSizes"
      limit.sync="10"
      @pagination="getForm"
    />
  </div>
</template>
<script>
import { parseTime } from '@/utils';
import searchForm from '@/components/SearchFrom';
import Pagination from "@/components/Pagination";
export default {
  components: { searchForm, Pagination},
  filters: {
    statusFilter(time, cFormat) {
      return parseTime(time, cFormat)
    },
    sexFilter(sex) {
      return sex === 'M' ? '男' : '女'
    }
  },
  props:{
    'selectedData':{
      type:String,
      default:''
    }
  },
  data() {
    return {
      account:'',
      selectUser:this.selectedData,
      loading:false,
      tableData:[],
      total:0,
      pageSizes:[10],
      pageNo:1,
      name:'',
      formOptions: [
        {
          label: '人员编码',
          prop: 'account',
          element: 'el-input'
        },
        {
          label: '姓名',
          prop: 'name',
          element: 'el-input'
        }
      ]
    }
  },
  created() {
    this.getForm()
  },
  methods: {
    config(row) {
      this.$emit('selectData',row)
    },
    handleFilter(data){
      this.account = data.account ? data.account : ''
      this.name = data.name ? data.name : ''
      this.getForm()
    },
    handleReset(){
      this.account = ''
      this.name = ''
      this.getForm()
    },
    getForm(){
      const params = {
        'sys_user:data[]': {
          '@column': 'user_id,account,account:code,name,sex',
          '@where': {
            'account@like':`%${this.account}%`,
            'status@eq':'ENABLE',
            'name@like': `%${this.name}%`,
          },
          '@page': {
            '@pageSize': 10,
            '@pageNo': this.pageNo
          },
          '@join': [
            {
              'sys_dept@leftOutJoin': {
                '@column': 'full_name',
                '@on': {
                  'dept_id': 'data/dept_id'
                }
              }
            }
          ]
        }
      }
      if(this.selectUser){
        params['sys_user:data[]']['@where']['account@eq'] = this.selectUser
      }
      this.COM.jsonsqlForSelect(params).then(res => {
        this.selectUser = ''
        this.loading = false;
        this.tableData = res.data
        this.total = parseInt(res.total)
      }) .catch(() => {
        this.loading = false;
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    height: calc(100% - 56px) !important;
    .leftTree {
      min-width: 200px;
      height: 100%;
      border: 1px solid #dfe6ec;
    }
    .cntTab {
      height: 100%;
      border: 1px solid #dfe6ec;
      border-left: none;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #1890ff;
    }
  }
</style>
